<template>
  <el-dialog
    class="bind-sub-equipment"
    :visible.sync="showDialog"
    title="绑定副设备"
    width="700px"
    append-to-body
    v-dialogDrag
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <div class="content">
      <div style="margin-bottom: 15px;">
        <el-input v-model="keyword" placeholder="请输入仪器名称、编号、型号" clearable></el-input>
      </div>
      <el-table
        ref="unBindEquipmentTable"
        :data="unBindEquipmentListFilter"
        :cell-style="{
          height: '45px'
        }"
        @row-click="handleTableRowClick"
        @selection-change="handleTableSelectionChange"
      >
        <el-table-column type="selection" align="center" width="50">
        </el-table-column>
        <el-table-column label="仪器编号" prop="equipmentNumber" align="center" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.equipmentNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仪器名称" prop="equipmentName" align="center" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.equipmentName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仪器型号" prop="equipmentTypeNumber" align="center" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.equipmentTypeNumber }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog-footer" slot="footer">
      <el-button @click="showDialog = false;">关 闭</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listingBindEquipment, toolboxBindEquipment } from '@/api/resourse/equipment'

export default {
  name: 'BindSubEquipment',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => ({})
    },
    bindEquipemntIds: {
      type: Array,
      default: () => ([])
    }
  },
  computed: {
    showDialog: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    },
  },
  data() {
    return {
      // 未绑定设备列表
      unBindEquipmentList: [],
      unBindEquipmentListFilter: [],
      // 选择的设备
      selectEquipmentList: [],

      keyword: ''
    }
  },
  watch: {
    keyword(val) {
      const selectEquipmentList = this.selectEquipmentList
      const filterRes = this.unBindEquipmentList.filter(item => {
        return item.equipmentNumber?.toLowerCase().includes(this.keyword.toLowerCase()) ||
        item.equipmentName?.toLowerCase().includes(this.keyword.toLowerCase()) ||
        item.equipmentTypeNumber?.toLowerCase().includes(this.keyword.toLowerCase())
      })
      this.unBindEquipmentListFilter = filterRes
      this.$nextTick(() => {
        selectEquipmentList.forEach(item => {
          this.$refs.unBindEquipmentTable.toggleRowSelection(item, true)
        })
      })
    }
  },
  methods: {
    // 打开弹框时
    handleDialogOpen() {
      listingBindEquipment(this.row.equipmentId, false).then(res => {
        this.unBindEquipmentList = res.data || []
        this.unBindEquipmentListFilter = this.unBindEquipmentList
      }).catch(err => {})
    },
    // 点击表格行
    handleTableRowClick(row) {
      this.$refs.unBindEquipmentTable.toggleRowSelection(row)
    },
    // 表格选择行变化时
    handleTableSelectionChange(rows) {
      this.selectEquipmentList = rows
    },
    // 点击确定
    handleConfirm() {
      if (this.selectEquipmentList.length <= 0) {
        return this.$message.warning('请选择设备')
      }
      const data = {
        primaryEquipmentId: this.row.equipmentId,
        equipmentId: this.selectEquipmentList.map(item => item.equipmentId).concat(this.bindEquipemntIds)
      }
      toolboxBindEquipment(data).then(res => {
        this.$message.success('操作成功')
        this.showDialog = false
        this.$emit('bind-success')
      }).catch(err => {})
    },
    // 关闭弹框时
    handleDialogClosed() {
      this.unBindEquipmentList = []
      this.selectEquipmentList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.content {

}
</style>
<style lang="scss">
.bind-sub-equipment .el-dialog__body {
  min-height: 40vh;
  max-height: 70vh;
  overflow-y: auto;
}
</style>
